<template>
  <div class="container">
    <Card style="margin-bottom:20px;margin-top: 10px;margin-left:10px;margin-right:10px">
      <Row type="flex" justify="space-between" align="middle">
        <Col span="12" style="margin-left: 15px">
          <b>学科名称</b>
          <Input style="width: 200px; margin-left: 15px" v-model="inputValue" />
          <Button style="margin-left: 15px" @click="clearSubject">清除</Button>
          <Button type="primary" style="margin-left: 15px" @click="serachSubject">搜索</Button>
        </Col>
        <Col>
          <Button style="margin-right: 15px" type="error" @click="addSubject=true">
            <Icon type="md-create" />
            新增学科
          </Button>
        </Col>
      </Row>
      <Row style="background: #f4f4f5; margin-top: 15px">
        <Col style="margin: 10px">
          <div style="color: #9093b1">
            <Icon type="md-information-circle" />
            <span>数据一共{{sumList}}条</span>
          </div>
        </Col>
      </Row>
      <Table :columns="columns1" :data="data1" style="margin-top: 15px" size="small">
        <template slot-scope="obj" slot="addDate">
            <strong>{{ obj.row.addDate | moment('YYYY-MM-DD HH-mm-ss') }}</strong>
        </template>
        <template slot-scope="{row}" slot="isFrontDisplay">
            <strong>{{ row.isFrontDisplay == 1?'是':'否' }}</strong>
        </template>
        <template slot="operation" slot-scope="{ row }">
          <Button type="text" size="small" style="margin-right: 5px;color:#40AAFF" @click="changeRouter(row.id,row.subjectName)">学科分类</Button>
          <Button type="text" size="small" style="margin-right: 5px;color:#40AAFF" @click="changeRouter1(row.id,row.subjectName)">学科标签</Button>
          <Button type="text" size="small" style="margin-right: 5px;color:#40AAFF" @click="showModal(row)">修改</Button>
          <Button type="text" size="small" style="margin-right: 5px;color:#40AAFF" @click="delSubject(row)">删除</Button>
        </template>
      </Table>
       <Row type="flex" justify="end">
         <Page :total="sumtotal" size="small" show-elevator show-sizer @on-change='changeCounts' :current='page' @on-page-size-change='changePageSize' :page-size='pagesize' />
       </Row>
    </Card>
    <Modal v-model="modifySubject" title="修改学科" @on-ok="modifyOk">
      <Form :model="formItem" :label-width="80" :rules="ruleValidate" ref="ruleForm">
        <FormItem label="学科名称" prop="subjectName">
          <Input v-model="formItem.subjectName"></Input>
        </FormItem>
        <FormItem label="是否显示">
          <el-switch
              v-model="formItem.isFrontDisplay"
              :active-value='1'
              :inactive-value='0'
            />
        </FormItem>
      </Form>
    </Modal>
    <subjectsAdd :addSubject.sync="addSubject"></subjectsAdd>
  </div>
</template>

<script>
import { list, remove, update, detail } from '@/api/hmmm/subjects'
import subjectsAdd from '../components/subjects-add.vue'
export default {
  data () {
    return {
      columns1: [
        {
          title: '序号',
          type: 'index',
          minWidth: 60
        },
        {
          title: '学科名称',
          key: 'subjectName',
          minWidth: 100
        },
        {
          title: '创建者',
          key: 'username',
          minWidth: 120
        },
        {
          title: '创建日期',
          slot: 'addDate',
          minWidth: 150
        },
        {
          title: '前台是否显示',
          slot: 'isFrontDisplay',
          minWidth: 100
        },
        {
          title: '二级目录',
          key: 'twoLevelDirectory',
          minWidth: 100
        },
        {
          title: '标签',
          key: 'tags',
          minWidth: 70
        },
        {
          title: '题目数量',
          key: 'totals',
          minWidth: 100
        },
        {
          title: '操作',
          slot: 'operation',
          minWidth: 300
        }
      ],
      data1: [], // 表格数据
      sumList: '', // 数据一共多少条
      inputValue: '', // 学科名称搜索框的内容
      modifySubject: false, // 修改弹窗
      addSubject: false, // 新增弹窗
      formItem: {
        subjectName: '',
        isFrontDisplay: 1 // 是否显示
      },
      ruleValidate: {
        subjectName: [
          { required: true, message: '名称不能为空', trigger: 'blur' } // 表单验证
        ]
      },
      searchSub: {}, // 自定义的一个对象用于保存搜索的参数
      page: 1, // 第几页
      pagesize: 10, // 一页有好多页
      sumtotal: 0 // 数据总共多少条
    }
  },
  created () {
    this.getRoleList()
  },
  components: {
    subjectsAdd
  },
  methods: {
    // 获取学科列表数据
    async getRoleList () {
      const { data } = await list({ page: this.page, pagesize: this.pagesize })
      console.log(data)
      this.data1 = data.items
      this.sumList = data.counts
      this.sumtotal = data.counts
    },
    // 删除学科
    async delSubject (data) {
      try {
        await this.$confirm('确定删除？')
        await remove(data)
        this.getRoleList()
        this.$message.success('删除成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 修改学科
    async showModal (data) {
      const data1 = await detail(data)
      console.log(data1)
      this.formItem = data1.data
      console.log(this.formItem)
      this.modifySubject = true
    },
    // 点击确定修改学科并渲染页面
    async modifyOk () {
      this.$refs.ruleForm.validate()
      await update(this.formItem)
      this.getRoleList()
      this.$Message.success('修改成功')
      this.modifySubject = false
    },
    // 搜索
    async serachSubject () {
      this.searchSub.subjectName = this.inputValue
      const { data } = await list(this.searchSub)
      this.data1 = data.items
      this.sumList = data.counts
      this.sumtotal = data.counts
    },
    // 清除
    clearSubject () {
      this.inputValue = ''
      this.getRoleList()
    },
    // 页面跳转
    changeCounts (i) {
      this.page = i
      console.log(this.page)
      this.getRoleList()
    },
    changePageSize (s) {
      this.pagesize = s
      console.log(this.pagesize)
      this.getRoleList()
    },
    // 路由跳转
    changeRouter (id, subjectName) {
      console.log(id)
      this.$router.push({
        path: '/subjects/directorys',
        query: {
          id: id,
          subjectName: subjectName
        }
      })
    },
    changeRouter1 (id, subjectName) {
      this.$router.push({
        path: '/subjects/tags',
        query: {
          id: id,
          subjectName: subjectName
        }
      })
    }
  }
}
</script>

<style scoped>
 /deep/.ivu-table th {
  color: #90A0C2 ;
  border-bottom: 1px solid gray;
}
</style>
